/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 15:51:43
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-25 16:18:37
 * @FilePath: /umi/src/components/xh-components/xh-select-icon/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from "react";
import { Input } from "antd";
import XHicon from "@/components/xh-components/xh-icon/index";
import list from "./icon";
import "./index.less";
const XHselectIcon = (props) => {
  const { selectedIcon } = props;
  const [iconList, setIconList] = useState(list);
  function filterIcons(val) {
    setIconList(list);
    if (val.target.value) {
      setIconList(list.filter((item) => item.nickname.indexOf(val.target.value) !== -1));
    } else {
      setIconList(list);
    }
  }

  return (
    <div
      style={{
        width: "400px",
      }}
    >
      <Input placeholder="请输入图标名称" allowClear onChange={filterIcons} onBlur={filterIcons} />
      <div className="icon-body">
        <div className="icon-list">
          {iconList.map((t, ind) => (
            <div className="flex-items-center" key={t.name + ind} onClick={() => selectedIcon(t)}>
              <XHicon icon={t.name} />
              <span>{t.nickname}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
export default XHselectIcon;
